import React, {Component} from 'react';

const Li = ({ item }) => {
    return (
        <li><span>{item.text}</span><input/></li>
    )
}

class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            testArray: [{text: '组件1', id: 'a'}, {text: '组件2', id: 'b'}, {text: '组件3', id: 'c'}, {text: '组件4', id: 'd'}]
        }
    }
 
    //修改state打乱顺序
    sort(){
        this.setState({
            testArray: [{text: '组件1', id: 'a'}, {text: '组件3', id: 'c'}, {text: '组件2', id: 'b'}, {text: '组件4', id: 'd'}]
        })
    }
    
    render() {
        return <div>
            <div>不指定key属性</div>
            <ul>
                {
                    this.state.testArray.map((item, index) => {
                        return <Li key={index} item={item} />
                    })
                }
            </ul>
            <div>指定key属性</div>
            <ul>
                {
                    this.state.testArray.map((item) => {
                        return <Li key={item.id} item={item} />
                    })
                }
            </ul>
            <button onClick={::this.sort}>打乱排序</button>
        </div>
    }
}
 
export default Test
/*
————————————————
版权声明：本文为CSDN博主「小敏哥」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/handsomexiaominge/article/details/86560003
*/